<template>
  <div>
    <div class="buy_reward_box">
      <a href="javascript:;" class="lqjl" @click="openFlag">我的领取记录</a>
      <a href="javascript:;" class="jl_num">{{
        `限定奖励领取(${v}/${c})`
      }}</a>
      <ul>
        <li v-for="(item, index) in LimitedGifts" :key="index">
          <p class="tips">
            {{ item.show_desc }}
          </p>
          <div class="buy_reward_box_item">
            <img v-bind:src="item.img" alt="" />
            <div class="buy_reward_box_item_center">
              <p class="buy_name">{{ item.name }}</p>
              <p class="buy_info">发放物品：{{ item.send_desc }}</p>
            </div>
            <div class="buy_reward_box_item_right">
              <p>
                可领取数量：<em>{{ item.remain }}</em>
              </p>
              <a
                href="javascript:;"
                v-if="item.rcv_flag == 0"
                class="ljlq"
                @click="_RcvLimitedGift(item.sort)"
                >立即领取</a
              >
              <a
                href="javascript:;"
                v-if="item.rcv_flag == -1"
                class="ljlq"
                @click="_RcvLimitedGift(item.sort)"
                >不可领取</a
              >
              <a
                href="javascript:;"
                v-if="item.rcv_flag == 1"
                class="ljlq"
                @click="_RcvLimitedGift(item.sort)"
                >已领取</a
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 我的领取记录弹窗 -->
    <div class="model2" v-show="lqFlag">
      <div class="inModel2">
        <h1>领取记录</h1>
        <i class="closeBTN" @click="lqFlag = false">×</i>
        <div class="tbl">
          <div class="tbl_top">
            <span>领取用户</span>
            <span>领取道具</span>
            <span class="current">领取时间</span>
          </div>
          <ul>
            <li v-for="(item, index) in LimitedHistoryLists" :key="index">
              <span>{{ item.user_name }}</span>
              <span>{{ item.show_name }}</span>
              <span class="current">
                <em>{{ item.create_time | ChangeDateFormat }}</em>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 我的领取记录弹窗 -->
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { RcvLimitedGift, LimitedHistory } from "../api/request";
import { Message } from "element-ui";
export default {
  data() {
    return {
      LimitedGifts: [],
      lqFlag: false,
      LimitedHistoryLists: [],
      c: 0,
      v: 0,
    };
  },
  mounted() {
    this.GetLimitedGiftFn();
  },
  methods: {
    ...mapActions("templateDate", ["GetLimitedGiftAction"]),
    async GetLimitedGiftFn() {
      const result = await this.GetLimitedGiftAction({
        id: this.$route.query.id,
      });
      console.log(result);
      const { data: res } = result;
      this.c = res.c;
      this.v = res.v;
      this.LimitedGifts = res.lst;
    },
    async _RcvLimitedGift(val) {
      const result = await RcvLimitedGift({
        id: this.$route.query.id,
        sort: val,
      });
      console.log(result);
      if (result.errCode < 0) {
        Message.error(result.msg);
      } else {
        Message.success(result.msg);
        this.GetLimitedGiftFn();
      }
    },
    async _LimitedHistoryLists() {
      const result = await LimitedHistory({ id: this.$route.query.id });
      this.lqFlag = true;
      console.log(result);
      if (result.errCode == 0) {
        this.LimitedHistoryLists = result.data;
      }
    },
    openFlag() {
      this._LimitedHistoryLists();
    },
  },
};
</script>
